
<!DOCTYPE html>


<html lang="en">


<head>

  <title><%=htmlWebpackPlugin.options.title || 'Template'%>
  </title>

  <link rel="apple-touch-icon"
    sizes="57x57"
    href="./assets/icon/apple-icon-57x57.png">


  <link rel="apple-touch-icon"
    sizes="60x60"
    href="./assets/icon/apple-icon-60x60.png">


  <link rel="apple-touch-icon"
    sizes="72x72"
    href="./assets/icon/apple-icon-72x72.png">


  <link rel="apple-touch-icon"
    sizes="76x76"
    href="./assets/icon/apple-icon-76x76.png">


  <link rel="apple-touch-icon"
    sizes="114x114"
    href="./assets/icon/apple-icon-114x114.png">


  <link rel="apple-touch-icon"
    sizes="120x120"
    href="./assets/icon/apple-icon-120x120.png">


  <link rel="apple-touch-icon"
    sizes="144x144"
    href="./assets/icon/apple-icon-144x144.png">


  <link rel="apple-touch-icon"
    sizes="152x152"
    href="./assets/icon/apple-icon-152x152.png">


  <link rel="apple-touch-icon"
    sizes="180x180"
    href="./assets/icon/apple-icon-180x180.png">


  <link rel="icon"
    type="image/png"
    sizes="192x192"
    href="./assets/icon/android-icon-192x192.png">


  <link rel="icon"
    type="image/png"
    sizes="32x32"
    href="./assets/icon/favicon-32x32.png">


  <link rel="icon"
    type="image/png"
    sizes="96x96"
    href="./assets/icon/favicon-96x96.png">


  <link rel="icon"
    type="image/png"
    sizes="16x16"
    href="./assets/icon/favicon-16x16.png">


  <link rel="manifest"
    href="./assets/manifest.json">


  <meta name="msapplication-TileColor"
    content="#ffffff">


  <meta name="msapplication-TileImage"
    content="/ms-icon-144x144.png">


  <meta name="theme-color"
    content="#ffffff">

  <meta charset="utf-8">


  <meta name="viewport"
    content="width=device-width, initial-scale=1">

</head>

<body><%if (htmlWebpackPlugin.files.favicon) { %>

  <link rel="shortcut icon"
    href="<%= htmlWebpackPlugin.files.favicon %>">
  <% } %> <%for (var css in htmlWebpackPlugin.files.css) { %>

  <link href="<%= htmlWebpackPlugin.files.css[css] %>"
    rel="stylesheet">
  <%} %> <%for (var chunk in htmlWebpackPlugin.files.chunks) { %>

  <a href="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"
    class="async_script"><%} %>

    <style>
      html,
      body,
      #root {
        height: 100%;
      }

      .async_script {
        display: none;
      }

      .loader {
        position: fixed;
        top: 35%;
        width: 48%;
      }

      .loader,
      .loader:before,
      .loader:after {
        background: rgb(237, 140, 61);
        -webkit-animation: load1 1s infinite ease-in-out;
        animation: load1 1s infinite ease-in-out;
        width: 1em;
        height: 4em;
      }

      .loader {
        color: #ffffff;
        text-indent: -9999em;
        margin: 88px auto;
        position: relative;
        font-size: 11px;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
      }

      .loader:before,
      .loader:after {
        position: absolute;
        top: 0;
        content: '';
      }

      .loader:before {
        left: -1.5em;
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
      }

      .loader:after {
        left: 1.5em;
      }

      @-webkit-keyframes load1 {
        0%,
        80%,
        100% {
          box-shadow: 0 0;
          height: 4em;
        }
        40% {
          box-shadow: 0 -2em;
          height: 5em;
        }
      }

      @keyframes load1 {
        0%,
        80%,
        100% {
          box-shadow: 0 0;
          height: 4em;
        }
        40% {
          box-shadow: 0 -2em;
          height: 5em;
        }
      }
    </style>

    <div id="root">

      <div class="loader">
      </div>

      <script>
        /**
   * @function 异步加载脚本
   * @param src 脚本地址
   * @param cb 加载完毕之后的回掉函数
   */
        function loadScript(src, cb) {
          //创建一个script元素
          var el = document.createElement('script');

          var loaded = false;

          //设置加载完成的回调事件
          el.onload = el.onreadystatechange = function() {
            //防止重复加载
            if (
              (el.readyState &&
                el.readyState !== 'complete' &&
                el.readyState !== 'loaded') ||
              loaded
            ) {
              return false;
            }

            //加载完成后将该脚本的onload设置为null
            el.onload = el.onreadystatechange = null;

            loaded = true;

            cb && cb();
          };

          el.async = true;

          el.src = src;

          var body = document.getElementsByTagName('body')[0];

          body.appendChild(el);
        }

        window.onload = function() {
          var scripts = [];

          [].forEach.call(
            document.getElementsByClassName('async_script'),
            function(a) {
              scripts.push(a.getAttribute('href'));
            }
          );

          for (var i = 0; i < scripts.length; i++) {
            (function(j) {
              setTimeout(function() {
                loadScript(scripts[j]);
              }, j * 500);
            })(i);
          }
        };

      </script>
    </div>
  </a>
</body>
</html>